<template>
	<view v-if="isAutoScan" class="searchScan">
		<u-search
			ref="uSelect"
			:show-action="true"
			actionText="手录"
			bgColor="#fff"
			borderColor="#f2f2f2"
			:focus="focus"
			:animation="true"
			placeholder="请扫描条形码"
			search-icon="scan"
			height="34px"
			shape="square"
			@clickIcon="openScan"
			@blur="scanBlurHandle"
			@custom="changeHandScan(isAutoScan)"
		></u-search>

		<!-- <input type="text" :focus="focus" placeholder="请扫描或输入单号"/> -->
		<!-- <input type="text" placeholder="请扫描或输入单号" :focus="foucsIndex == 1" inputmode="none"/> -->
		<!-- <input class="uni-input" placeholder="请扫描或输入单号" :focus="foucsIndex == 1"></input> -->
	</view>

	<view v-else class="searchScan">
		<u-search
			v-model="scanCode"
			:show-action="true"
			searchIconSize="24px"
			actionText="扫码"
			bgColor="#fff"
			borderColor="#f2f2f2"
			:focus="focus"
			:animation="true"
			placeholder="请手动输入条形码"
			search-icon="scan"
			height="34px"
			@custom="changeHandScan(isAutoScan)"
		>
			<template #right>
				<u-icon name="scan" size="24px"></u-icon>
			</template>
		</u-search>
	</view>
</template>

<script setup name="ScanBar">
/**
 * ScanBar 扫码组件
 * @description 手动录入、自动扫码
 * @property {Array} scanType 扫码类型
 * @property {Boolean} reset = [true | false] 初始化扫码组件
 * @event {Function} code-scanned 扫码成功事件
 * @event {Function} update:reset 同步reset事件
 * @example <scan-bar @code-scanned="getScanResult" v-model:reset="scanReset"></scan-bar>
 */
import { onShow } from '@dcloudio/uni-app';
import { nextTick, onMounted, ref, watch } from 'vue';

const emit = defineEmits(['code-scanned']);

const props = defineProps({
	scanType: {
		type: Array,
		default: () => ['barCode', 'qrCode', 'datamatrix', 'pdf417']
	}
});

const { scanType } = toRefs(props);

const focus = ref(false);

const isAutoScan = ref(true);

const uSelect = ref();

onMounted(()=>{
	$hideKeyboard();
	setTimeout(()=>{ focus.value = true; }, 500)
	// focus.value = true;
	// hideKeyboard();
})

function reset() {
	// focus.value = false;
	setTimeout(()=>{
		focus.value = true;
	}, 500)
}
const foucsIndex = ref(0);
function toFoucs(to, hideKeyboard = true, callback) {
	foucsIndex.value = 9999;
	nextTick(() => {
		foucsIndex.value = to;
		hideKeyboard ? $hideKeyboard() : '';
		callback ? callback() : '';
	});
}
// 关闭软键盘,防冻
function $hideKeyboard() {
	const interval = setInterval(function () {
		uni.hideKeyboard(); //隐藏软键盘
	}, 10);
	setTimeout(() => {
		clearInterval(interval);
		console.log('停止刷新')
	}, 2000);
}

function scanBlurHandle() {
	// 光标value重置
	// focus.value = false;
}
function hideKeyboard() {
	uni.hideKeyboard();
}

const scanCode = ref('');
function openScan() {
	/* #ifdef H5 */
	uni.showToast({
		icon: 'none',
		title: '请到安卓设备进行扫码'
	});
	/* #endif */
	// 只允许通过相机扫码
	uni.scanCode({
		scanType: scanType.value,
		onlyFromCamera: true,
		success: (res) => {
			scanCode.value = res.result;
			console.log('条码类型：' + res.scanType);
			console.log('条码内容：' + res.result);
			emit('code-scanned', res);
		},
		fail: (err) => {
			if (err.errMsg !== 'scanCode:fail cancel') {
				uni.showModal({
					title: '扫描失败',
					content: err.errMsg
				});
			}
		},
		complete: () => {
			uni.showToast({
				title: '完成'
			});
			focus.value = true;
		}
	});
}
function changeHandScan(value) {
	isAutoScan.value = !value;
	focus.value = true;
}

defineExpose({
	reset
});
</script>

<style lang="scss" scoped></style>
